<template>
  <div class="settings-container">
    <el-card>
      <template #header>
        <h3>系统设置</h3>
      </template>
      
      <el-form label-width="120px" :model="settings" :rules="rules" ref="formRef">
        <!-- 基本设置 -->
        <div class="section">
          <h4>基本设置</h4>
          <el-form-item label="系统名称" prop="systemName">
            <el-input v-model="settings.systemName"/>
          </el-form-item>
          <el-form-item label="系统描述" prop="description">
            <el-input type="textarea" v-model="settings.description"/>
          </el-form-item>
          <el-form-item label="系统Logo">
            <el-upload
              class="avatar-uploader"
              :action="uploadApi"
              :headers="headers"
              :show-file-list="false"
              :before-upload="beforeLogoUpload"
              :on-success="handleLogoSuccess">
              <img v-if="settings.logo" :src="settings.logo" class="avatar">
              <el-icon v-else><Plus /></el-icon>
            </el-upload>
          </el-form-item>
        </div>

        <!-- 视频设置 -->
        <div class="section">
          <h4>视频设置</h4>
          <el-form-item label="最大视频大小" prop="maxVideoSize">
            <el-input-number v-model="settings.maxVideoSize" :min="1" :max="10000"/>
            <span class="unit">MB</span>
          </el-form-item>
          <el-form-item label="允许的格式" prop="allowedFormats">
            <el-select v-model="settings.allowedFormats" multiple>
              <el-option label="MP4" value="mp4"/>
              <el-option label="AVI" value="avi"/>
              <el-option label="MOV" value="mov"/>
              <el-option label="WMV" value="wmv"/>
              <el-option label="FLV" value="flv"/>
            </el-select>
          </el-form-item>
          <el-form-item label="默认清晰度" prop="defaultQuality">
            <el-select v-model="settings.defaultQuality">
              <el-option label="1080P" value="1080p"/>
              <el-option label="720P" value="720p"/>
              <el-option label="480P" value="480p"/>
              <el-option label="360P" value="360p"/>
            </el-select>
          </el-form-item>
        </div>

        <!-- 存储设置 -->
        <div class="section">
          <h4>存储设置</h4>
          <el-form-item label="存储方式" prop="storageType">
            <el-radio-group v-model="settings.storageType">
              <el-radio label="local">本地存储</el-radio>
              <el-radio label="oss">阿里云OSS</el-radio>
              <el-radio label="cos">腾讯云COS</el-radio>
            </el-radio-group>
          </el-form-item>
          
          <template v-if="settings.storageType !== 'local'">
            <el-form-item label="AccessKey" prop="accessKey">
              <el-input v-model="settings.accessKey" show-password/>
            </el-form-item>
            <el-form-item label="SecretKey" prop="secretKey">
              <el-input v-model="settings.secretKey" show-password/>
            </el-form-item>
            <el-form-item label="Bucket" prop="bucket">
              <el-input v-model="settings.bucket"/>
            </el-form-item>
            <el-form-item label="区域" prop="region">
              <el-input v-model="settings.region"/>
            </el-form-item>
            <el-form-item label="域名" prop="domain">
              <el-input v-model="settings.domain">
                <template #prepend>https://</template>
              </el-input>
            </el-form-item>
          </template>
        </div>

        <!-- 转码设置 -->
        <div class="section">
          <h4>转码设置</h4>
          <el-form-item label="转码清晰度">
            <el-checkbox-group v-model="settings.transcodeQualities">
              <el-checkbox label="1080p">1080P</el-checkbox>
              <el-checkbox label="720p">720P</el-checkbox>
              <el-checkbox label="480p">480P</el-checkbox>
              <el-checkbox label="360p">360P</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>

        <!-- 审核设置 -->
        <div class="section">
          <h4>审核设置</h4>
          <el-form-item label="视频审核">
            <el-switch v-model="settings.videoReview"/>
          </el-form-item>
          <el-form-item label="评论审核">
            <el-switch v-model="settings.commentReview"/>
          </el-form-item>
          <el-form-item label="自动审核">
            <el-switch v-model="settings.autoReview"/>
          </el-form-item>
          <el-form-item label="敏感词过滤">
            <el-switch v-model="settings.sensitiveFilter"/>
          </el-form-item>
          <el-form-item label="敏感词列表" v-if="settings.sensitiveFilter">
            <el-input
              type="textarea"
              v-model="settings.sensitiveWords"
              :rows="4"
              placeholder="每行输入一个敏感词"/>
          </el-form-item>
        </div>

        <!-- 功能设置 -->
        <div class="section">
          <h4>功能设置</h4>
          <el-form-item label="评论功能">
            <el-switch v-model="settings.enableComment"/>
          </el-form-item>
          <el-form-item label="弹幕功能">
            <el-switch v-model="settings.enableDanmaku"/>
          </el-form-item>
          <el-form-item label="水印功能">
            <el-switch v-model="settings.enableWatermark"/>
          </el-form-item>
          <template v-if="settings.enableWatermark">
            <el-form-item label="水印图片">
              <el-upload
                class="watermark-uploader"
                :action="uploadApi"
                :headers="headers"
                :show-file-list="false"
                :before-upload="beforeWatermarkUpload"
                :on-success="handleWatermarkSuccess">
                <img v-if="settings.watermarkImage" :src="settings.watermarkImage" class="watermark">
                <el-icon v-else><Plus /></el-icon>
              </el-upload>
            </el-form-item>
            <el-form-item label="水印位置">
              <el-select v-model="settings.watermarkPosition">
                <el-option label="左上角" value="top-left"/>
                <el-option label="右上角" value="top-right"/>
                <el-option label="左下角" value="bottom-left"/>
                <el-option label="右下角" value="bottom-right"/>
              </el-select>
            </el-form-item>
          </template>
        </div>

        <div class="footer">
          <el-button type="primary" @click="saveSettings" :loading="saving">保存</el-button>
          <el-button @click="resetSettings">重置</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const settings = ref({
  systemName: '',
  description: '',
  maxVideoSize: 1000,
  allowedFormats: ['mp4'],
  videoReview: true,
  commentReview: true
})

const saveSettings = async () => {
  try {
    // 调用API保存设置
    ElMessage.success('保存成功')
  } catch (error) {
    ElMessage.error('保存失败')
  }
}

const resetSettings = () => {
  settings.value = {
    systemName: '',
    description: '',
    maxVideoSize: 1000,
    allowedFormats: ['mp4'],
    videoReview: true,
    commentReview: true
  }
  ElMessage.info('已重置')
}
</script>

<style scoped>
.settings-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.section {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

h4 {
  margin: 0 0 20px;
  color: #333;
}

.unit {
  margin-left: 10px;
  color: #666;
}

.footer {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

:deep(.el-select) {
  width: 100%;
}
</style> 